<!doctype html>
<html lang="zh">

<head>
  <title>Checkbox</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/checkbox.js';
    import '../../packages/mdui/components/button.js';
    import { $ } from '../../packages/jq/index.js';

    // 隐藏默认错误提示
    $('.prevent-default').on('invalid', function (e) {
      e.preventDefault();
    });
  </script>
</head>

<body>
  <main>
    <section>
      <h2>Checkbox</h2>
      <mdui-checkbox></mdui-checkbox>
      <mdui-checkbox no-ripple>no-ripple</mdui-checkbox>
      <mdui-checkbox disabled></mdui-checkbox>
      <mdui-checkbox disabled>Checkbox</mdui-checkbox>
      <div class="mdui-theme-dark">
        <mdui-checkbox></mdui-checkbox>
        <mdui-checkbox>Checkbox</mdui-checkbox>
        <mdui-checkbox disabled></mdui-checkbox>
        <mdui-checkbox disabled>Checkbox</mdui-checkbox>
      </div>
    </section>

    <section>
      <h2>Checked</h2>
      <mdui-checkbox checked></mdui-checkbox>
      <mdui-checkbox checked>Checkbox</mdui-checkbox>
      <mdui-checkbox checked disabled></mdui-checkbox>
      <mdui-checkbox checked disabled>Checkbox</mdui-checkbox>
      <div class="mdui-theme-dark">
        <mdui-checkbox checked></mdui-checkbox>
        <mdui-checkbox checked>Checkbox</mdui-checkbox>
        <mdui-checkbox checked disabled></mdui-checkbox>
        <mdui-checkbox checked disabled>Checkbox</mdui-checkbox>
      </div>
    </section>

    <section>
      <h2>Indeterminate</h2>
      <mdui-checkbox indeterminate></mdui-checkbox>
      <mdui-checkbox indeterminate>Checkbox</mdui-checkbox>
      <mdui-checkbox indeterminate disabled></mdui-checkbox>
      <mdui-checkbox indeterminate disabled>Checkbox</mdui-checkbox>
      <div class="mdui-theme-dark">
        <mdui-checkbox indeterminate></mdui-checkbox>
        <mdui-checkbox indeterminate>Checkbox</mdui-checkbox>
        <mdui-checkbox indeterminate disabled></mdui-checkbox>
        <mdui-checkbox indeterminate disabled>Checkbox</mdui-checkbox>
      </div>
    </section>

    <section>
      <h2>icon & icon slot</h2>
      <mdui-checkbox
        unchecked-icon="radio_button_unchecked"
        checked-icon="check_circle"
        indeterminate-icon="playlist_add_check_circle"
      >Checkbox</mdui-checkbox>
      <mdui-checkbox
        indeterminate
        unchecked-icon="radio_button_unchecked"
        checked-icon="check_circle"
        indeterminate-icon="playlist_add_check_circle"
      >Checkbox</mdui-checkbox>
      <br/>
      <mdui-checkbox>
        <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
        <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
        <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
        Checkbox
      </mdui-checkbox>
      <mdui-checkbox indeterminate>
        <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
        <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
        <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
        Checkbox
      </mdui-checkbox>
    </section>

    <section>
      <h2>Required</h2>
      <form>
        <mdui-checkbox name="checkbox[]" required></mdui-checkbox>
        <mdui-checkbox name="checkbox[]" required>Checkbox</mdui-checkbox>
        <mdui-checkbox name="checkbox[]" required class="prevent-default">preventDefault()</mdui-checkbox>
        <mdui-checkbox name="checkbox[]" required disabled></mdui-checkbox>
        <mdui-checkbox name="checkbox[]" required disabled indeterminate>Checkbox</mdui-checkbox>
        <div class="mdui-theme-dark">
          <mdui-checkbox name="checkbox[]" required></mdui-checkbox>
          <mdui-checkbox name="checkbox[]" required>Checkbox</mdui-checkbox>
          <mdui-checkbox name="checkbox[]" required class="prevent-default">preventDefault()</mdui-checkbox>
          <mdui-checkbox name="checkbox[]" required disabled></mdui-checkbox>
          <mdui-checkbox name="checkbox[]" required disabled indeterminate>Checkbox</mdui-checkbox>
        </div>
        <br />
        <mdui-button type="submit">Submit</mdui-button>
      </form>
    </section>

    <section>
      <h2>长文本自动换行</h2>
      <mdui-checkbox>长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本</mdui-checkbox>
    </section>

  </main>
</body>

</html>
